<template>
  <div class="emergency-order-container">
    <div class="page-header">
      <div class="header-title">
        <h2>紧急订单处理</h2>
        <span class="subtitle">优先处理需要立即响应的紧急运输订单</span>
      </div>
      <div class="header-actions">
        <el-button type="danger" @click="createEmergencyOrder">
          <el-icon><Warning /></el-icon>创建紧急订单
        </el-button>
        <el-button @click="refreshOrders">
          <el-icon><Refresh /></el-icon>刷新
        </el-button>
      </div>
    </div>

    <!-- 紧急订单列表 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="emergency-title">待处理紧急订单</span>
          <el-tag type="danger" effect="dark" size="large">{{ emergencyOrders.length }}</el-tag>
        </div>
      </template>

      <el-table
        :data="emergencyOrders"
        style="width: 100%"
        v-loading="loading"
        row-class-name="emergency-row"
      >
        <el-table-column type="expand">
          <template #default="props">
            <el-descriptions :column="3" border>
              <el-descriptions-item label="联系人">{{ props.row.contact }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ props.row.phone }}</el-descriptions-item>
              <el-descriptions-item label="紧急程度">
                <el-tag :type="getUrgencyType(props.row.urgencyLevel)">
                  {{ getUrgencyText(props.row.urgencyLevel) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="货物类型">{{ props.row.cargoType }}</el-descriptions-item>
              <el-descriptions-item label="货物重量">{{ props.row.weight }}吨</el-descriptions-item>
              <el-descriptions-item label="货物体积">{{ props.row.volume }}m³</el-descriptions-item>
              <el-descriptions-item label="特殊要求" :span="3">{{ props.row.specialRequirements }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        
        <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="pickupAddress" label="提货地址" min-width="200"></el-table-column>
        <el-table-column prop="deliveryAddress" label="送货地址" min-width="200"></el-table-column>
        <el-table-column prop="expectedDeliveryTime" label="期望送达时间" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="scope">
            <el-button-group>
              <el-button 
                type="primary" 
                size="small"
                @click="assignVehicle(scope.row)"
              >
                分配车辆
              </el-button>
              <el-button 
                type="success" 
                size="small"
                @click="processOrder(scope.row)"
              >
                立即处理
              </el-button>
              <el-button 
                type="warning" 
                size="small"
                @click="transferOrder(scope.row)"
              >
                转普通订单
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 可用车辆列表 -->
    <el-card class="available-vehicles" v-if="showVehicles">
      <template #header>
        <div class="card-header">
          <span>可用车辆</span>
          <el-radio-group v-model="vehicleFilter" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="nearby">附近车辆</el-radio-button>
            <el-radio-button label="matched">匹配车型</el-radio-button>
          </el-radio-group>
        </div>
      </template>

      <el-table
        :data="availableVehicles"
        style="width: 100%"
        @row-click="selectVehicle"
      >
        <el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
        <el-table-column prop="vehicleType" label="车型" width="120"></el-table-column>
        <el-table-column prop="capacity" label="载重能力" width="120">
          <template #default="scope">
            {{ scope.row.capacity }}吨
          </template>
        </el-table-column>
        <el-table-column prop="volume" label="车厢体积" width="120">
          <template #default="scope">
            {{ scope.row.volume }}m³
          </template>
        </el-table-column>
        <el-table-column prop="currentLocation" label="当前位置" min-width="200"></el-table-column>
        <el-table-column prop="distance" label="距离提货点" width="120">
          <template #default="scope">
            {{ scope.row.distance }}km
          </template>
        </el-table-column>
        <el-table-column prop="estimatedArrivalTime" label="预计到达时间" width="180"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Warning, Refresh } from '@element-plus/icons-vue'

// 加载状态
const loading = ref(false)

// 是否显示可用车辆列表
const showVehicles = ref(false)

// 车辆筛选
const vehicleFilter = ref('all')

// 紧急订单列表
const emergencyOrders = ref([
  {
    orderNo: 'EMG202503140001',
    createTime: '2025-03-14 14:30:00',
    contact: '张三',
    phone: '13800138000',
    pickupAddress: '上海市浦东新区张江高科技园区',
    deliveryAddress: '南京市江宁区南京南站物流园',
    expectedDeliveryTime: '2025-03-14 20:00:00',
    urgencyLevel: 'high',
    cargoType: '电子产品',
    weight: 2.5,
    volume: 8,
    specialRequirements: '需要恒温运输，温度保持在20-25度',
    status: 'pending'
  },
  {
    orderNo: 'EMG202503140002',
    createTime: '2025-03-14 14:45:00',
    contact: '李四',
    phone: '13900139000',
    pickupAddress: '上海市嘉定区安亭汽车城',
    deliveryAddress: '苏州市工业园区物流中心',
    expectedDeliveryTime: '2025-03-14 18:00:00',
    urgencyLevel: 'medium',
    cargoType: '汽车配件',
    weight: 1.8,
    volume: 5,
    specialRequirements: '小心轻放，避免碰撞',
    status: 'processing'
  }
])

// 可用车辆列表
const availableVehicles = ref([
  {
    id: 1,
    plateNumber: '沪A12345',
    vehicleType: '厢式货车',
    capacity: 5,
    volume: 16,
    currentLocation: '上海市浦东新区外高桥保税区',
    distance: 15,
    estimatedArrivalTime: '2025-03-14 15:30:00'
  },
  {
    id: 2,
    plateNumber: '沪B67890',
    vehicleType: '冷藏车',
    capacity: 3,
    volume: 12,
    currentLocation: '上海市浦东新区金桥开发区',
    distance: 8,
    estimatedArrivalTime: '2025-03-14 15:15:00'
  }
])

// 获取紧急程度类型
const getUrgencyType = (level) => {
  const typeMap = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return typeMap[level] || 'info'
}

// 获取紧急程度文本
const getUrgencyText = (level) => {
  const textMap = {
    high: '高危紧急',
    medium: '中度紧急',
    low: '低度紧急'
  }
  return textMap[level] || '未知'
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    pending: 'danger',
    processing: 'warning',
    assigned: 'success',
    completed: 'info'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    pending: '待处理',
    processing: '处理中',
    assigned: '已分配',
    completed: '已完成'
  }
  return textMap[status] || '未知'
}

// 创建紧急订单
const createEmergencyOrder = () => {
  ElMessage.info('打开创建紧急订单表单 - 功能待实现')
}

// 刷新订单列表
const refreshOrders = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('订单列表已刷新')
  }, 1000)
}

// 分配车辆
const assignVehicle = (order) => {
  showVehicles.value = true
  ElMessage.info(`正在为订单 ${order.orderNo} 分配车辆`)
}

// 选择车辆
const selectVehicle = (vehicle) => {
  ElMessageBox.confirm(
    `确定要分配车辆 ${vehicle.plateNumber} 处理该紧急订单吗？`,
    '确认分配',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    showVehicles.value = false
    ElMessage.success(`已分配车辆 ${vehicle.plateNumber}`)
  }).catch(() => {
    // 取消操作
  })
}

// 立即处理
const processOrder = (order) => {
  ElMessageBox.confirm(
    '确定要立即处理该紧急订单吗？系统将优先调度资源。',
    '确认处理',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    order.status = 'processing'
    ElMessage.success('订单已开始处理')
  }).catch(() => {
    // 取消操作
  })
}

// 转为普通订单
const transferOrder = (order) => {
  ElMessageBox.confirm(
    '确定要将该紧急订单转为普通订单吗？',
    '确认转换',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = emergencyOrders.value.findIndex(item => item.orderNo === order.orderNo)
    if (index !== -1) {
      emergencyOrders.value.splice(index, 1)
      ElMessage.success('订单已转为普通订单')
    }
  }).catch(() => {
    // 取消操作
  })
}
</script>

<style scoped>
.emergency-order-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.header-title h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.emergency-title {
  font-size: 16px;
  font-weight: bold;
  color: #f56c6c;
}

.emergency-row {
  background-color: #fff8f8;
}

.available-vehicles {
  margin-top: 20px;
}

:deep(.el-descriptions) {
  padding: 15px;
}

:deep(.el-button-group) {
  display: flex;
  gap: 5px;
}
</style>
